<template>
  <div>
    <div>
      <we-button @click="dialogFormVisible = true" type="primary" size="mini">
        <em class="el-icon-plus"></em> 新增
      </we-button>
      <we-button v-if="baseCode" @click="detailRow(currentRow)" type="primary" size="mini">
        <em class="el-icon-edit"></em> 修改
      </we-button>
      <we-button v-if="baseCode" @click="deleteRow"  type="primary" size="mini">
        <em class="el-icon-delete"></em> 删除
      </we-button>
    </div>

    <!-- 表格 -->
    <el-table
      size="mini"
      :header-cell-style="rowClass"
      :data="tableData"
      border
      highlight-current-row
      resizable
      ref="singleTable"
      @row-dblclick="detailRow"
      @current-change="handleCurrentChange"
      style="width: 100%; margin-top: 5px"
    >
      <el-table-column type="index" label="#"> </el-table-column>
      <el-table-column prop="date" width="150" label="曾用名"> </el-table-column>
      <el-table-column prop="name" width="150" label="在岗/内退">
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="间断工龄"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="连续工龄"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="进本系统时间"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="排序"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="从事专业类别"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="从事专业描述"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="增员日期"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="增员途径"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="用工形式"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="用工期限"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="减员日期"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="学位证书号"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="学位授予日期"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="学位授予单位"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        :show-overflow-tooltip="true"
        label="学位授予国家(地区)"
      >
      </el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <we-button @click="detailRow(scope.row)" type="primary" size="mini"
            >详情</we-button
          >
          <we-button
            @click="deleteRow(scope.$index, tableData)"
            type="danger"
            size="mini"
            >删除</we-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <div class="table_tools">
      <we-pagination :total="pagerConfig.total"></we-pagination>
    </div>
    <!-- 表格 -->

    <!-- 新增弹窗 -->
    <el-dialog
      title="学历学位子集"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        size="mini"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学历" prop="data1">
              <el-cascader
                class="inputW"
                v-model="ruleForm.data1"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所学专业类别" prop="data2">
              <el-cascader
                class="inputW"
                v-model="ruleForm.data2"
                :options="options"
                :props="{ checkStrictly: true }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所学专业(描述)" prop="data3">
              <el-input
                class="inputW"
                v-model="ruleForm.data3"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入学日期" prop="data4">
              <el-date-picker
                class="inputW"
                v-model="ruleForm.data4"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学制" prop="data5">
              <el-input
                class="inputW"
                v-model.number="ruleForm.data5"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学位" prop="data6">
              <el-cascader
                class="inputW"
                v-model="ruleForm.data6"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学位性质" prop="data7">
              <el-select
                class="inputW"
                v-model="ruleForm.data7"
                placeholder="请选择活动区域"
                clearable
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="双学位描述" prop="data8">
              <el-input
                class="inputW"
                v-model="ruleForm.data8"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="毕业日期" prop="data9">
              <el-date-picker
                class="inputW"
                v-model="ruleForm.data9"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业学校" prop="data10">
              <el-input
                class="inputW"
                v-model="ruleForm.data10"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="教育类别" prop="data11">
              <el-select
                class="inputW"
                v-model="ruleForm.data11"
                placeholder="请选择活动区域"
                clearable
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学习形式" prop="data12">
              <el-select
                class="inputW"
                v-model="ruleForm.data12"
                placeholder="请选择活动区域"
                clearable
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学历证书号" prop="data13">
              <el-input
                class="inputW"
                v-model="ruleForm.data13"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学位证书号" prop="data14">
              <el-input
                class="inputW"
                v-model="ruleForm.data14"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学位授予日期" prop="data15">
              <el-date-picker
                class="inputW"
                v-model="ruleForm.data15"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学位授予单位" prop="data16">
              <el-input
                class="inputW"
                v-model="ruleForm.data16"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学位授予国家(地区)" prop="data17">
              <el-select
                class="inputW"
                v-model="ruleForm.data17"
                placeholder="请选择活动区域"
                clearable
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"> </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" @click="dialogFormVisible = false"
          >取 消</we-button
        >
        <we-button v-if="!isUpdate" :loading="true" size="mini" type="primary" @click="submitForm('ruleForm')"
          >新 增</we-button
        >
        <we-button v-if="isUpdate" size="mini" type="primary" @click="submitForm('ruleForm')"
          >修 改</we-button
        >
      </div>
    </el-dialog>
    <!-- 新增弹窗 -->
  </div>
</template>

<script>
import WeButton from '@/components/WeButton'
import WePagination from '@/components/WePagination'
export default {
  components: {
    WeButton,
    WePagination
  },
  data () {
    const checkdata5 = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      isUpdate: false,
      pagerConfig: {
        total: 10,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500]
      },
      currentRow: null,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          tag: '家'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          tag: '公司'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          tag: '家'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          tag: '公司'
        }
      ],
      dialogFormVisible: false,
      ruleForm: {
        data1: '',
        data2: '',
        data3: '',
        data4: '',
        data5: '',
        data6: '',
        data7: '',
        data8: '',
        data9: '',
        data10: '',
        data11: '',
        data12: '',
        data13: '',
        data14: '',
        data15: '',
        data16: '',
        data17: ''
      },
      rules: {
        data1: [{ required: true, message: '请选择学历', trigger: 'change' }],
        data2: [
          { required: true, message: '请选择所学专业类型', trigger: 'change' }
        ],
        data3: [
          { required: true, message: '请填写所学专业(描述)', trigger: 'blur' }
        ],
        data5: [{ validator: checkdata5, trigger: 'blur' }],
        data9: [
          { required: true, message: '请选择毕业日期', trigger: 'change' }
        ],
        data10: [
          { required: true, message: '请填写毕业学校', trigger: 'blur' }
        ],
        data11: [
          { required: true, message: '请选择教育类别', trigger: 'change' }
        ]
      },

      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局'
                },
                {
                  value: 'color',
                  label: 'Color 色彩'
                },
                {
                  value: 'typography',
                  label: 'Typography 字体'
                },
                {
                  value: 'icon',
                  label: 'Icon 图标'
                },
                {
                  value: 'button',
                  label: 'Button 按钮'
                }
              ]
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框'
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框'
                },
                {
                  value: 'input',
                  label: 'Input 输入框'
                },
                {
                  value: 'input-number',
                  label: 'InputNumber 计数器'
                },
                {
                  value: 'select',
                  label: 'Select 选择器'
                },
                {
                  value: 'cascader',
                  label: 'Cascader 级联选择器'
                },
                {
                  value: 'switch',
                  label: 'Switch 开关'
                },
                {
                  value: 'slider',
                  label: 'Slider 滑块'
                },
                {
                  value: 'time-picker',
                  label: 'TimePicker 时间选择器'
                },
                {
                  value: 'date-picker',
                  label: 'DatePicker 日期选择器'
                },
                {
                  value: 'datetime-picker',
                  label: 'DateTimePicker 日期时间选择器'
                },
                {
                  value: 'upload',
                  label: 'Upload 上传'
                },
                {
                  value: 'rate',
                  label: 'Rate 评分'
                },
                {
                  value: 'form',
                  label: 'Form 表单'
                }
              ]
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table 表格'
                },
                {
                  value: 'tag',
                  label: 'Tag 标签'
                },
                {
                  value: 'progress',
                  label: 'Progress 进度条'
                },
                {
                  value: 'tree',
                  label: 'Tree 树形控件'
                },
                {
                  value: 'pagination',
                  label: 'Pagination 分页'
                },
                {
                  value: 'badge',
                  label: 'Badge 标记'
                }
              ]
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert 警告'
                },
                {
                  value: 'loading',
                  label: 'Loading 加载'
                },
                {
                  value: 'message',
                  label: 'Message 消息提示'
                },
                {
                  value: 'message-box',
                  label: 'MessageBox 弹框'
                },
                {
                  value: 'notification',
                  label: 'Notification 通知'
                }
              ]
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'NavMenu 导航菜单'
                },
                {
                  value: 'tabs',
                  label: 'Tabs 标签页'
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑'
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单'
                },
                {
                  value: 'steps',
                  label: 'Steps 步骤条'
                }
              ]
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog 对话框'
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示'
                },
                {
                  value: 'popover',
                  label: 'Popover 弹出框'
                },
                {
                  value: 'card',
                  label: 'Card 卡片'
                },
                {
                  value: 'carousel',
                  label: 'Carousel 走马灯'
                },
                {
                  value: 'collapse',
                  label: 'Collapse 折叠面板'
                }
              ]
            }
          ]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ],
      value1: '',
      value: '',
      formLabelWidth: '140px'
    }
  },
  watch: {
    dialogFormVisible () {
      if (this.dialogFormVisible === false) {
        setTimeout(() => {
          this.isUpdate = false
        }, 500)
      }
    }
  },
  methods: {
    /*  详情  */
    detailRow (row) {
      if(!row){
        this.$message("请选择要编辑的数据！")
        return
      }
      console.log(row)
      this.isUpdate = true
      this.dialogFormVisible = true
    },

    /*  新增  */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.loading = true
          // this.loading = false
          this.$message({
            type: 'success',
            message: '新增成功!'
          })
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCurrentChange(val) {
        this.currentRow = val;
    },

    /*  删除  */
    deleteRow (i, row) {
      this.$confirm('是否要删除这条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          row.splice(i, 1)
          console.log(this.ruleForm)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    handleClose () {},
    handleChange () {},
    rowClass ({ row, rowIndex }) {
      return 'background:rgba(248, 248, 249, 1);color:#000;'
    }
  }
}
</script>

<style scoped>


.table_tools {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
